<template>
	<view class="container">
		<!-- 头部标题和状态 -->
		<view class="header">
			<view>
			<image src="../../../static/chedui/zuojiantou.png" style="width: 30px; height: 30px;"></image>
			<text class="title">货源详情</text>
			</view>
			<view>
			<image src="../../../static/images/sangedian.png" style="width: 30px; height: 30px; margin-right: 20rpx;"></image>
			</view>
		</view>

		<view class="time-info">
			<view style="margin-left: 1vh; width: 500rpx; ">2021年12月10日 08:30发布</view>
			<view class="status paused" style="width: 100rpx;">已暂停</view>
		</view>

		<view class="card_bottown">
			<view class="card">
				<view class="section-title" style="margin-top: 15rpx;">
				<text class="label">货源ID:</text>
				<text class="value">HY214891348197491</text>
				<image src="../../../static/images/copy.png" 
				style="width: 2vh; height: 2.5vh; margin-left: 160rpx;"
				@click="copy"></image></view>
			</view>
			<!-- 基本信息卡片 -->
			<view class="card">
				<view class="info-item">
					<text class="label">装货时间:</text>
					<text class="value">2021年12月10日 09:00</text>
				</view>

				<view class="location-item">
					<text class="location-label">冯家川业务（自动）</text>
					<text class="location-address">山西省忻州市保德县冯家川煤矿</text>
				</view>

				<view class="location-item">
					<text class="location-label">太原市第二热电厂</text>
					<text class="location-address">山西省太原市关营区新兰路173号</text>
				</view>

				<view class="info-item">
					<text class="label">结束时间:</text>
					<text class="value">2022年1月8日 18:00</text>
				</view>
			</view>



			<!-- 专属车队卡片 -->
			<view class="card">
				<view class="section-title">专属车队</view>
				<view class="fleet-info">
					<text class="fleet-name">张三的1号车队</text>
					<text class="fleet-count">8辆车</text>
				</view>
			</view>

			<!-- 货价信息卡片 -->
			<view class="card">
				<view class="section-title">货价信息</view>
				<view class="info-item">
					<text class="label">中硫5400</text>
					<text class="value">货物余量 1000.00吨</text>
				</view>
				<view class="price-item">
					<text class="price">40.00元/吨(含税)</text>
				</view>
			</view>

			<!-- 费用信息卡片 -->
			<view class="card">
				<view class="section-title">费用信息</view>
				<view class="info-item">
					<text class="label">司机服务费率</text>
					<text class="value">300.00%</text>
				</view>
				<view class="info-item">
					<text class="label">油费</text>
					<text class="value">200.00元/车</text>
				</view>
			</view>

			<!-- 底部提示 -->
			<view class="footer-note">
				<text>资源到了结束时间的时候，就变为了已结束状态</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 这里可以使用 Vue3 的 composition API
	import {
		ref,
		onMounted
	} from 'vue'

	// 如果需要从接口获取数据，可以这样写
	const goodsInfo = ref({})
	const copy = () => {
	  //提示模板
	  uni.showModal({
	    content:value,//模板中提示的内容
	    confirmText:'复制内容',
	    success:()=>{//点击复制内容的后调函数
	      //uni.setClipboardData方法就是讲内容复制到粘贴板
	      uni.setClipboardData({
	        data:value,//要被复制的内容
	        success:()=>{//复制成功的回调函数
	          uni.showToast({//提示
	            title:'复制成功'
	          })
	        }
	      });
	    }
	  });
	}

	onMounted(() => {
		// 模拟从接口获取数据
		goodsInfo.value = {
			id: 'HY214891348197491',
			publishTime: '2021年12月10日 08:30',
			status: '已暂停',
			loadingTime: '2021年12月10日 09:00',
			startLocation: {
				name: '冯家川业务（自动）',
				address: '山西省忻州市保德县冯家川煤矿'
			},
			endLocation: {
				name: '太原市第二热电厂',
				address: '山西省太原市关营区新兰路173号'
			},
			endTime: '2022年1月8日 18:00',
			fleet: {
				name: '张三的1号车队',
				count: 8
			},
			goods: {
				type: '中硫5400',
				remaining: '1000.00吨',
				price: '40.00元/吨(含税)'
			},
			fees: {
				serviceRate: '300.00%',
				oilFee: '200.00元/车'
			}
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background: #002fa7;
		min-height: 100vh;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: 60rpx;
				font-weight: bold;
				color: #ffffff;
			}

			.status {
				font-size: 28rpx;
				padding: 6rpx 12rpx;
				border-radius: 8rpx;

				&.paused {
					color: #ffffff;
				}

				&.ended {
					background-color: #e0e0e0;
					color: #757575;
				}
			}
		}

		.time-info {
			display: flex;
			font-size: 26rpx;
			color: #ffffff;
			margin-bottom: 30rpx;
			justify-content: space-between;
		}
	}
	
	.card_bottown {
		height: 100vh;
		background-color: #f2f2f2;
		border-radius: 32rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		.card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}
		
		.info-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 28rpx;
		
			.label {
				color: #666;
			}
		
			.value {
				color: #333;
				font-weight: 500;
			}
		}
		
		.location-item {
			margin-bottom: 20rpx;
		
			.location-label {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 8rpx;
				display: block;
			}
		
			.location-address {
				font-size: 26rpx;
				color: #666;
			}
		}
		
		.section-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			position: relative;
			padding-left: 20rpx;
		
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 30rpx;
				background-color: #2979ff;
				border-radius: 4rpx;
			}
		}
		
		.fleet-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.fleet-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		
			.fleet-count {
				font-size: 26rpx;
				color: #666;
			}
		}
		
		.price-item {
			margin-top: 10rpx;
		
			.price {
				font-size: 32rpx;
				color: #ff5722;
				font-weight: bold;
			}
		}
		
		.divider {
			height: 20rpx;
			background-color: #f5f5f5;
			margin: 20rpx 0;
		}
		
		.footer-note {
			font-size: 24rpx;
			color: #999;
			text-align: center;
			margin-top: 30rpx;
			padding: 0 20rpx;
		}
	}
	
</style>